<template>
	<view>
		<!-- 面包屑 -->
		<view class="productBar">
			品牌馆>{{product.lname}}
		</view>
		<!-- 轮播图 -->
		<view class="productCarousel">
			<swiper style="height: 600rpx;" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="2000" :circular="true">
				<swiper-item v-for="(pic,i) in product.picList" :key="i">
					<image :src="$url.baseURL+pic.lg" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 文字部分 -->
		<view class="detailArea">
			<view class="detailText">
			<text class="detailTitle">{{product.title}}</text>
			<text style="padding: 20rpx;">{{product.subtitle}}</text>
			<view class="promise">
				<view>学员售价：￥{{product.price}}</view>
				<view style="margin-top: 4rpx;">服务承诺：{{product.promise}}</view>
			</view>
		
			<text style="padding: 20rpx;">客服：联系客服</text>
			</view>
		</view>
		
		<!-- 规格部分 -->
		<view class="selectSpc">
			<text style="padding-left: 20rpx; margin-top: 5rpx;">规格：</text>
			<view class="spc">
				<text :class="selectedSpec==index?'cur':''" :data-i='index' @click="selected" v-for="(i,index) in family.laptopList" :key='i.lid'>{{i.spec}}</text>
				
			</view>
		</view>
		
		<!-- 数量和按钮 -->
		<view class="">
			<view class="count">
				<text>数量：</text>
				<button @click="count--" type="default" :disabled="count<=0">-</button>
				<text class="countNum">{{count}}</text>
				<button @click="count++" type="default">+</button>
			</view>
			<view class="buyArea">
				<button class="buy" type="default">立即购买</button>
				
				<button class="joinCart" type="default" @click="alreadyadd=!alreadyadd">
					<uni-icons type="cart" color="#FFF" ></uni-icons>
					<text v-if="alreadyadd">已加入购物车</text>
					<text v-else>加入购物车</text>
				</button>

				<button class="addList" type="default" @click="fav=!fav">
					<uni-icons v-if="!fav" type="heart" color="#fff" @click=""></uni-icons>
					<text v-if="fav">已收藏</text>
					<text v-else>收藏</text>
				</button>
			</view>
			
			<!-- 为你推荐 -->
			<view class="">
				<view class="suggest">为您推荐</view>
				<swiper 
				style="height: 320rpx;"
				:autoplay="true" 
				:interval="2000" 
				:duration="5000" 
				:circular="true" 
				display-multiple-items='2'
				easing-function="linear"
				>
					<swiper-item>
						<image class="carousel" src="../../static/img/recommend_img1.png" mode="widthFix"></image>
						<view style="text-align: center;">ThinkPad New S2</view>
					</swiper-item>
					<swiper-item>
						<image  class="carousel" src="../../static/img/recommend_img2.png" mode="widthFix"></image>
						<view style="text-align: center;">AppleMacBookAir</view>
					</swiper-item>
					<swiper-item>
						<image  class="carousel" src="../../static/img/recommend_img3.png" mode="widthFix"></image>
						<view style="text-align: center;">ThinkPadE480C</view>
					</swiper-item>
					<swiper-item>
						<image  class="carousel" src="../../static/img/recommend_img4.png" mode="widthFix"></image>
						<view style="text-align: center;">戴尔燃7000</view>
					</swiper-item>
					<swiper-item>
						<image class="carousel" src="../../static/img/recommend_img1.png" mode="widthFix"></image>
						<view style="text-align: center;">ThinkPad New S2</view>
					</swiper-item>
					<swiper-item>
						<image  class="carousel" src="../../static/img/recommend_img2.png" mode="widthFix"></image>
						<view style="text-align: center;">AppleMacBookAir</view>
					</swiper-item>
					<swiper-item>
						<image  class="carousel" src="../../static/img/recommend_img3.png" mode="widthFix"></image>
						<view style="text-align: center;">ThinkPadE480C</view>
					</swiper-item>
					<swiper-item>
						<image  class="carousel" src="../../static/img/recommend_img4.png" mode="widthFix"></image>
						<view style="text-align: center;">戴尔燃7000</view>
					</swiper-item>
					
				</swiper>
			</view>
			<!-- 商品详情 -->
			<view class="suggest">
				<text>商品详情</text>
			</view>
			<view class="detail">
				<rich-text :nodes="product.details"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				alreadyadd:false,
				fav:false,
				product:{},
				family:{},
				detailsPic:[],
				count:1,
				selectedSpec:0,
			};
		},

		methods:{
			selected(e){
				let selectedSpec = e.target.dataset.i
				this.selectedSpec = selectedSpec
			},
			parseHTML(){
				this.product.details = this.product.details.replace(/src="img/gi,`src="${this.$url.baseURL}img`)
				let fixWidth = this.product.details.replace(/<img class=""/gi,`<img style="width:100%"`)
				this.product.details = fixWidth
			},
		},
		onLoad(data) {
				if(!data.pid){
					uni.showToast({
						title: '没有您查找的商品',
						mask:true,
						icon:'error',
						duration:2000,
						complete: () => {
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/index/index'
								})
							},2000)
							
						}
					});
				}else{
					//发起请求
					let url = `${this.$url.details}?lid=${data.pid}`
					uni.showLoading({
						title:"商品加载中..."
					})
					uni.request({
						method:'GET',
						url:url,
						success: (res) => {
							this.product = res.data.product
							this.family = res.data.family
							this.parseHTML()
							uni.setNavigationBarTitle({
								title:this.product.lname
							})
							console.log('本地的详情数据：',this.product);
						},
						fail: (err) => {
							console.log(err);
						},
						complete: () => {
							uni.hideLoading()
						}
					})	
				}
				
		}
	}
</script>

<style lang="scss">

	.carousel{
		width: 100%;
	}
.productBar{
	padding: 20rpx;
}
.detailArea{
	display: flex;
	flex-direction: column;
	.detailText{
		display: flex;
		flex-direction: column;
		.detailTitle{
			padding: 20rpx 15rpx 0 15rpx;
			font-size: 32rpx;
			font-weight: 400;
		}
		.promise{
			color: #6A6A6A;
			box-shadow: 0 0 2px 0 #aaaaaa;
			padding: 25rpx;
			background-color: #E4E7ED;
		}
	}
	
}
.selectSpc{
	display: flex;
	.spc{
		padding: 5rpx;
		display: flex;
		flex-direction: column;
		.cur{
				border: 1px solid #0AA1ED;
				color: #0AA1ED;

		}
		text{
			line-height: 40rpx;
			border: 1px solid #AAAAAA;
			border-radius: 6rpx;
			padding: 0 20rpx;
			margin: 4rpx;
		}
	}
}
.productCarousel{
	image{
		width: 100%;
		
	}
}
.count{
	padding: 20rpx;
	display: flex;
	align-items: center;
	.countNum{
		border-radius: 6rpx;
		text-align: center;
		 line-height: 52rpx;
		 width: 80rpx;
		 height: 52rpx;
		 background-color: #E4E7ED; 
		 border: 1px solid #D8D8D8;
	}
	button{
		background-color: #E4E7ED; 
		font-size: 16px;
		line-height: 1;
		padding: 10rpx;
		margin: 0 10rpx;
		width: 52rpx;
		height: 52rpx;
		&:active{
			background-color: #C8C7CC;
		}
	}
}
.buyArea{
	
	justify-content: flex-start;
	margin-top: 20rpx ;
	button{
		margin-left: 20rpx;
		display: inline-block;
		font-size: 24rpx;
	}
	.buy{
		display: inline;
		padding: 15rpx;
		position: relative;
		background-color: #DCDFE6;
		&:active{
			background-color: #bfc1c7;
		}
	}
	.joinCart{
		display: inline;
		padding: 15rpx;
		position: relative;
		color: #FFF;
		background-color: #007dfe;
		&:active{
			background-color: #0071e2;
		}
	}
	.addList{
		display: inline;
		padding: 15rpx;
		position: relative;
		width: 140rpx;
		color: #FFF;
		background-color: #007dfe;
		&:active{
			background-color: #0071e2;
		}
	}
}
.suggest{
	padding: 20rpx;
	box-shadow: 0 0 4rpx 0rpx #A5A5A5;
	margin: 20rpx 0;
}
.detail{
	
}
</style>
